<template>
<div :style="{width:width,height:height}">
    <div v-show="flag"  class="echarts" ref="echarts" :style="{height:height}"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '../../../mixins/mixincomon';

export default {
    name:"chart",
    mixins: [mixincomon],
    data(){
        return {
            flag:true,
            options: {
                title: [{
                    text: 'SPEED',
                    x: 'center',
                    top: '35%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 50,
                        fontWeight: '700',
                    }
                }],
                polar: {
                    radius: ['70%', '90%'],
                    center: ['50%', '50%'],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [{
                    name: '',
                    type: 'bar',
                    roundCap: true,
                    barWidth: 70,
                    showBackground: false,
                    backgroundStyle: {
                        color: '#1c3384',
                    },
                    data: [],
                    coordinateSystem: 'polar',

                    itemStyle: {
                        normal: {
                            color: new this.echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#9300e8'
                            }, {
                                offset: 1,
                                color: '#54b0ff'
                            }]),
                        }
                    }

                },{
                    name: '',
                    type: 'pie',
                    z: 1,
                    startAngle: 90,
                    radius: ['76%', '84%'],
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        normal: {
                            labelLine: {
                                show: false
                            },
                            color: '#1c3384',
                        }
                    },
                    data: [{
                        value: 100,

                    }]
                }]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
        width:{
            type:String,
            default:"300px"
        },
        height:{
            type:String,
            default:"300px"
        },
        message:{
            type:String,
            default:'暂无数据'
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    watch: {
        
    },
    methods:{
        init(){
            if(this.data.length>0){
                let _option=this.tool.deepMerge(this.options,this.option);
                this.flag=true;
                this.$nextTick(()=>{
                    let series=[];
                    this.data.map((item,index)=>{
                        series.push(this.tool.deepMerge(Object.assign({type:'bar'},_option.series[index]),item));
                       _option.title[0].text=item.data[0];
                    })
                    let len = _option.series.length
                    series.push(_option.series[len-1]);
                    _option.series=series;
                    this.initChart('echarts',_option);
                 })

            }else{
                this.clearChart();
                this.flag=false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.no-data-echarts{
    height: 100%;
    position: relative;
    span{
        left: 0;
        text-align: center;
        position: absolute;
        top: 45%;
    }
}
</style>
